<template>
  <div class="home">
    <home-nav-bar/>
    <div class="banner">
      <img src="../../assets/img/home/banner.webp" alt="">
    </div>
    <home-search></home-search>
    <home-category></home-category>
    <div class="search-bar" v-if="isShow">
      <search-bar/>
    </div>
    <home-content></home-content>
    

  </div>
</template>

<script setup>
import searchBar from '@/components/search-bar/search-bar.vue';
import HomeCategory from './ChildComponent/HomeCategory.vue';
import HomeNavBar from './ChildComponent/HomeNavBar.vue';
import HomeSearch from './ChildComponent/HomeSearch.vue';
import HomeContent from './ChildComponent/HomeContent.vue';
import homeStore from '@/stores/modules/home';
import useScroll from '@/hooks/useScroll'
import {ref, watch} from 'vue'
const Store=homeStore()

//方式1：回调函数监听页面滚动到底部的方式，
// useScroll(()=>{
//   Store.fetchHouselistData()
// })
// 方式2：定义一个变量
let {isScroll,scrollTop} =useScroll()
// 使用watch进行监听
watch(isScroll,(newValue)=>{
      if(newValue){
        Store.fetchHouselistData().then(()=>{
          isScroll.value=false
        })
        
      }
})

const isShow=ref(false)
watch(scrollTop,(newValue)=>{
      isShow.value=newValue>360  
})



</script>


<style lang="less" scoped>
.banner{
  width: 100%;
}


.search-bar {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  right: 0;
  height: 45px;
  padding: 16px 16px 10px;
  background-color: #fff;
}




</style>